<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>树图</title>
  <link rel="stylesheet" href="../../css/root.css">
  <link rel="stylesheet" href="../../css/grid.css">
  <script src="../../../libs/d3/d3.v6.js"></script>
</head>

<body>
  <header>
    <h1>树图</h1>
  </header>
  <main class="container">
    <h2>生命之树</h2>
    <section>
      <div id="lifeTree" style="height:100vh;"></div>
    </section>
    <h2>垂直树图</h2>
    <section>
      <div id="verticalTree" style="height: 100vh;"></div>
    </section>
    <h2>水平树图</h2>
    <section>
      <div id="horizontalTree" style="height: 100vh;"></div>
    </section>
    <h2>径向树图</h2>
    <section>
      <div id="radialTree" style="height: 100vh;"></div>
    </section>
    <h2>矩形树图</h2>
    <section>
      <div id="treeMap" style="height: 100vh;"></div>
    </section>
  </main>

  <script type="module">
    import LifeTree from './charts/tree.life.js'
    import HorizontalTree from './charts/tree.horizontal.js'
    import VerticalTree from './charts/tree.vertical.js'
    import RadialTree from './charts/tree.radial.js'

    d3.json('./data/data2.json').then(data => {
      let lt = new LifeTree('lifeTree', data)
        .setColorKeys(["Bacteria", "Eukaryota", "Archaea"])
        .setMargin(100, 0, 100, 0)
        .init()
        .render();
      
      setTimeout(()=>{
        d3.json('./data/data.json').then(d=>{
          console.log(d);
          lt.render(d);
        })
      },2000) 
    })
    d3.json('./data/wind.decision.tree.json').then(data => {
      let vt = new VerticalTree('verticalTree', data)
        .setMargin(50, 50, 50, 50)
        .init()
        .render();

      let ht = new HorizontalTree('horizontalTree', data)
        .setMargin(50, 50, 50, 50)
        .init()
        .render();

      let rt = new RadialTree('radialTree', data)
        .setMargin(50, 50, 50, 50)
        .init()
        .render();
    })
  </script>
</body>

</html>